import { defineComponent, VNode, PropType, ref } from 'vue';
/* hooks */
import { useDialog } from "@hooks/useDialog";
import i18n from '@src/locales'
/* utils */
import { openAccurateTab } from '@src/util/platform'
import platform from '@src/platform/index.js'
import { t } from '@src/locales';
/* type */
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
/* http */
import { updateRobotName } from '@src/api/intelligentQuality.js'
import { message } from '@src/util/message';

export default defineComponent({
    name: 'EditQualityDialog',
    props: {

    },
    setup(props, { emit, expose }) {
        const formRef = ref<HTMLDivElement | null>(null)
        const modelForm = ref({
            robotName: '',
            robotDesc: ''
        })
        const formId = ref('')
        const modelFormRules = ref({
            robotName: [
                { required: true, message: t('robot.text6'), trigger: 'blur' }
            ]
        });
        const { visible, showDialog, hideDialog } = useDialog()

        const clearDialog = () => {
            hideDialog()
            modelForm.value = {
                robotName: '',
                robotDesc: ''
            }
        }
        /**
        * @des 相关生成modal的对应的attrs
        * @returns {any}
        */
        const getModalAttrs = () => {
            return {
                props: {
                    class: "create-robot-modal",
                    width: '500px',
                    title: t('robot.text7'),
                    show: visible.value,
                    appendToBody: true
                },
                on: {
                    'update:show': (value: boolean) => {
                        visible.value = value
                        emit('updateModalValue', value)
                    }
                }
            }
        }
        const refreshCurrentTab = () => {
            const fromId = window?.frameElement?.getAttribute('id') as string
            platform.refreshTab(fromId)
        }
        
        
        const refreshFromTab = () => {
            let fromId = window?.frameElement?.getAttribute('fromid')
            platform.refreshTab(fromId)
        }

        const handleConfirm = () => {
            (formRef.value as any).validate(async (valid: boolean) => {
                if (valid) {
                    const res = await updateNameAndRemarks()
                    if (!res) {
                        return
                    }
                    refreshCurrentTab()
                    refreshFromTab()

                    clearDialog();
                } else {
                    console.error(t('robot.text8'));
                }
            });
        };

        const updateNameAndRemarks = async () => {
            const res = await updateRobotName({
                name: modelForm.value.robotName,
                remarks: modelForm.value.robotDesc,
                robotNo: formId.value
            })
            if (!res.success) {
                message.error(t('robot.text9'))
                return false
            }
            message.success(t('robot.text10'))
            return true
        }


        expose({showDialog, hideDialog, modelForm, formId})

        return () => (
            <base-modal {...getModalAttrs()} onCancel={() => clearDialog()}>
                <el-form ref={formRef} class="create-robot-form" {...{
                    props: {
                        'model': modelForm.value
                    }
                }} label-position={'top'} rules={modelFormRules.value}>
                    <el-form-item label={t('robot.text11')} prop="robotName">
                        <el-input value={modelForm.value.robotName} onInput={(e) => modelForm.value.robotName = e} maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label={t('robot.text12')} prop="robotDesc">
                        <el-input type="textarea" value={modelForm.value.robotDesc} onInput={(e) => modelForm.value.robotDesc = e}></el-input>
                    </el-form-item>
                </el-form>
                <div slot={'footer'}>
                    <el-button type={'plain-third'} onClick={() => clearDialog()}>{t('robot.cancel')}</el-button>
                    <el-button type={'primary'} onClick={() => handleConfirm()}>{t('robot.text13')}</el-button>
                </div>
            </base-modal>
        ) as unknown as VNode
    }
})

